<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Liujingjing
 * @LastEditTime: 2022-01-10 11:58:34
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" style="height: 95%"></div>
</template>
<script>
// // 2. 导入图表构造函数
// import { Line } from '@antv/g2plot';
// import {mapState} from 'vuex'
// import { get } from '../../../utils/request';
// import moment from 'moment'
// export default {
//   data(){
//     return {
//       monitorData:[],
//       chart:null
//     }
//   },
//   mounted() {
//     // 4. 在页面渲染完成后调用图表的渲染
//     this.initChart();
//   },
//   computed: {
//     ...mapState(['ed'])
//   },
//   watch: {
//     ed:{
//       async handler(params){
//         // 重新加载数据
//         await this.loadMonitorData();
//         this.changeData();
//       },
//       deep:true
//     }
//   },
//   methods:{
//     changeData(){
//       if(this.chart){
//         this.chart.changeData(this.monitorData)
//       }
//     },
//     async loadMonitorData(){
//       let url = "/dashboard/pageQueryTodayData"
//       let params = {
//         page:1,
//         pageSize:20,
//         ...this.ed
//       }
//       let resp =await get(url,params);
//       let data = resp.data.list.map(item => {
//         return {
//           time:moment(item.insert_time).format('hh:mm'),
//           value:+item.temperature
//         }
//       })
//       this.monitorData = data;
//     },
//     // 3. 初始化图表
//     initChart(){
//       const data = this.monitorData;
//       const line = new Line(this.$refs.left1_container, {
//         data,
//         xField: 'time',
//         yField: 'value',
//         color:'l(90) 0:#D1D1FF 1:#7C82EA',
//         xAxis: {
//           label: {
//             rotate: -45,
//             offset: 10,
//             style: {
//               fill: "white",
//               fontFamily: "TencentSans",
//               fontSize: 16,
//             },
//           },
//         },
//         yAxis: {
//           label: {
//             style: {
//               fill: "white",
//               fontFamily: "TencentSans",
//               fontSize: 16,
//             }
//           }
//         }
//       });
//       line.render();
//       this.chart = line;
//     }
//   }
// }

import { Line } from "@antv/g2plot"
import {get} from '../../../utils/request'
import moment from 'moment'
export default {
  data() {
    return {
      dataArr: [],
    };
  },
  created() {},
  mounted() {
    //5.调用
    this.initData();
  },
  methods: {
    initData(){
      get('http://8.130.15.199:7001/dashboard/pageQueryTodayData',{
        page: 1,
        pageSize: 20,
        device_id: 1,
        
      }).then(res => {
        res.data.list.forEach(item => {
          item.dataTime = moment(item.insert_time).format('hh:mm')
          
        });
        this.dataArr= res.data.list;
        console.log(4444,this.dataArr);
        this.initChart()
      })
    },
    
    initChart() {
      //3.创建一个折线图实例对象 'container'=this.$refs.left1_container
      const line = new Line(this.$refs.left1_container, {
        data: this.dataArr,
        xField: "dataTime",
        yField: "temperature",
        
      });
      //4.渲染图像
      line.render();
    },
  },
}
</script>